<template>
    <!-- 列表单个商家 -->
    <router-link :to="'/business' + a.path">

      <section class="tj_business">

        <section class="one_business ">
          <div class="business_img">
            <img src="../../images/slider-pic/slider-pic1.jpeg" alt="">
          </div>
          <div class="business_info">
            <section class="business_name">
              <h3 class="name"><span v-if="a.brand">品牌</span>{{ a.shop_name }}</h3>
              <div class="name_icon">
                <div class="bzp" v-if="a.bao">
                  <i>保</i>
                </div>
                <div class="bzp" v-if="a.piao">
                  <i>票</i>
                </div>
                <div class="bzp" v-if="a.zhun">
                  <i>准</i>
                </div>
              </div>
            </section>
            <section class="business_code clear">
              <div class="code_num fl">
                <svg class="v-md">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use>
                </svg>
                <span class="v-md">{{ a.shop_rating }}</span>
              </div>
              <div class="code_icon fr clear">
                <div class="zsd fr" v-if="a.on_time">准时达</div>
                <div class="fnzs fr" v-if="a.fengniao">蜂鸟专送</div>
              </div>
            </section>
            <section class="business_other ">
              <div class="other_price fl">
                <span class="com_gray1">￥{{ a.start_send }}起送</span>
                <span>/</span>
                <span class="com_gray1">配送费约￥{{ a.send_cost }}</span>
              </div>
              <div class="other_dis fr">
                <span class="com_gray2">{{ a.distance }}m</span>
                <span>/</span>
                <span class="com_blue">{{ a.estimate_time }}分钟</span>
              </div>
            </section>
          </div>
        </section>
        <div class="line"></div>
      </section>

    </router-link>

</template>

<script>
export default {
  name: 'one_business',
  props: ['a'],
  data () {
    return {
      msg: '1'

    };
  },
  mounted () {

  },
  computed: {

  },
  methods: {

  }

};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
  .tj_business>.one_business{
    background-color: #fff;
    width:100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    padding:.1rem 0;
    border-bottom: dashed 1px #333333;
  }
.tj_business>.one_business>.business_img{
    width: .7rem;
    height: .7rem;
    img{
      width:100%;
      height: 100%;
      display: block;
    }
}
  .tj_business>.one_business>.business_info>.business_name{
    display: flex;
    justify-content: space-between;
  }
  .tj_business>.one_business>.business_info>.business_name>.name{
    width: 1.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    span{
      color:#ffaa0c;
      font-size: .1rem;
      margin-right: .05rem;
      vertical-align: middle;
      border:1px solid #ffaa0c;
    }
  }
  .tj_business>.one_business>.business_info>.business_name>.name_icon{
    width: 1rem;
    .bzp{
      float: right;
      border:1px solid #ddd;
      width: .15rem;
      height: .15rem;
      margin:0 .02rem;
      border-radius: .03rem;
      color: #999;
      i{
        font-style: normal;
        line-height: .15rem;
        font-size: .12rem;
        text-align: center;
      }
    }
  }
  .tj_business>.one_business>.business_info>.business_name>.name_icon:before{
    width:0;
    height: 0;
    padding: 0;
    margin: 0;
    content: "";
    clear: both;
  }
  .code_icon{
    width:1.3rem;
  }
  .code_icon>div{
    border: 1px solid #0096FF;
    color: #0096FF;
    font-size: .1rem;
    margin: .02rem;
  }
svg{
  fill: #ffaa0c;
  width: .1rem;
  height: .1rem;
}
</style>
